
<template>
    <!-- <el-scrollbar class="left-menu"> -->
        <!-- <el-radio-group v-model="isCollapse" style="margin: 10px 20px;">
        <el-radio-button :label="false" >展开</el-radio-button>
        <el-radio-button :label="true" >收起</el-radio-button>
    </el-radio-group> -->
        
    <!-- </el-scrollbar> -->
    <el-scrollbar class="left-menu">
        <!-- mode模式有horizontal|vertical两种；vertical时可以设置 collapse ，是否水平设置折叠 -->
        <el-menu class="default-vertical-menu" :default-active="1" :collapse="isCollapse" mode="vertical" unique-opened="true"
     @open="handleOpen" @close="handleClose" @select="handleSelect">
            <el-sub-menu v-for="(menuGroup) in state.leftMenuData" :key="menuGroup['menuGroupId']" :index="menuGroup.menuGroupId">
                <template #title>{{ menuGroup['menuGroupName'] }}</template>
                <el-menu-item v-for="(menuItem) in menuGroup['menuVos']" :key="menuItem['id']" :index="menuItem['routerUrl']">
                    {{ menuItem['menuName'] }}
                </el-menu-item>
            </el-sub-menu>
        </el-menu>
    </el-scrollbar>
</template>
<script lang="ts" setup>

import { ref,reactive , onBeforeMount } from 'vue'
import { getMenuApi } from '@/http/api/menu/menu';
import { MyResponseType } from '@/bean/base/response';
import { LeftMenuGroupType,MenuData } from '@/bean/menu/AllMenuType';



const emit = defineEmits(["chilkMenuLink"]);

let state = reactive(new MenuData());
// const state = reactive({
//     menuList: []
// });


onBeforeMount(() => {
    getMenuApi().then((res:MyResponseType<Array<LeftMenuGroupType>>)=>{
        state.leftMenuData = res.data;
    });
})

let isCollapse = ref(false);

function handleOpen(key:any,keyPath:any) {
    console.log(key,keyPath);
}

function handleClose(key:any,keyPath:any) {
    console.log(key,keyPath);
}

function handleSelect(key:any,keyPath:any) {
    emit('chilkMenuLink',key);
}



</script>

<style scoped>


.el-menu {
    border-right: unset;
}
.left-menu {
    width: 100%;
    height: 100vh;
}
.default-vertical-menu {
    width: 100%;
}
.el-menu-demo .el-submenu__title,.el-menu-item {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 600px) {

}

</style>